<template>
  <div class="encryptionContent">
    <div class="inputMain">
      <el-input v-model="search" placeholder=" 快速搜索需要的工具" clearable @clear="clearSearch" class="input" @keyup="goSearch"
        input-style="opacity: 0.8;box-shadow: 0px 3px 20px 0px #f8d852;">
        <template #prepend>
          <el-button icon="Search" />
        </template>
        <template #append>
          <el-button type="info" @click="goSearch" style="width: 150px;">搜索一下</el-button>
        </template>
      </el-input>
    </div>
    <div class="noData" v-if="noData">
      <SvgIcon width="160px" height="160px" name="noData" color="#fff"></SvgIcon>
      <h1>没找到你想要的功能</h1>
    </div>
    <div class="encryptionMain" id="encryptionMain" v-else>
      <el-button type="info" class="encryptionMainItem" v-for="item in encryptionItem" :key="item.id"
        @click="goItem(item)">
        <el-icon style="font-size: 20px;">
          <component :is="item.icon"></component>
        </el-icon>
        <p>{{ item.title }}</p>
      </el-button>
    </div>
    <!-- 小彩蛋 -->
    <PaintedEggshel></PaintedEggshel>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { reqToolsInfo } from '@/api/tools/index.ts'
import { tools } from '@/api/tools/type'
import Sortable from 'sortablejs'
import { debounce, throttle } from 'lodash'

const sortable = ref()

const router = useRouter()
const encryptionItem = ref<tools[]>([])

const search = ref<string>('')
const noData = ref<boolean>(false)

const goItem = (item: any) => {
  if (item.path == '') {
    ElMessage.warning('该模块功能暂未上线, 敬请期待！')
    return
  }
  router.push({
    path: `/tools/${item.path}`,
    query: {
      id: item.id,
      title: item.title
    }
  })
}

// 拖拽
const tableRowDrag = () => {
  const encryptionMain = document.querySelector('#encryptionMain')
  sortable.value = Sortable.create(encryptionMain, {
    draggable: '.encryptionMainItem',
    disabled: false,
    onEnd({ newIndex, oldIndex }: any) {
      const currRow = encryptionItem.value.splice(oldIndex, 1)[0]
      encryptionItem.value.splice(newIndex, 0, currRow)
    },
  })
  // sortable.value.options.disabled = true
}

const getToolsList = () => {
  reqToolsInfo({}).then((res: any) => {
    if (res.code == '200') {
      encryptionItem.value = res.data
      noData.value = false
      if (encryptionItem.value.length == 0) {
        noData.value = true
      }
    } else {
      noData.value = true
      ElMessage.error(res.data.message)
    }
  })
}

const clearSearch = () => {
  search.value = ''
  getToolsList()
}

const handlerGoSearch = () => {
  if (search.value == '') {
    getToolsList()
    return
  }
  const result = encryptionItem.value.filter((item): item is any => {
    return item.title.includes(search.value)
  })
  encryptionItem.value = result
  noData.value = (encryptionItem.value.length == 0)
}

// 搜索防抖
const goSearch = debounce(handlerGoSearch, 400)

onMounted(() => {
  getToolsList()
  tableRowDrag()
})

</script>

<style lang="scss" scoped>
.encryptionContent {
  width: 100%;
  height: auto;

  .inputMain {
    width: 100%;
    text-align: center;
    margin-top: 50px;

    .input {
      width: 60%;
      height: 50px;
      border-radius: 10px;
    }

    :deep(.el-input__wrapper) {
      // background: #8c909b;
      opacity: 0.7;
    }

    :deep(.el-input-group__append) {
      // background: #8c909b;
      // opacity: 0.9;

    }

    :deep(.el-input-group__prepend) {
      // background: #8c909b;
      // opacity: 0.9;
    }
  }

  .noData {
    margin-top: 100px;
    width: 85%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    h1 {
      font-size: 30px;
      font-weight: 700;
      margin-top: 30px;
      color: #f8d852;
    }
  }

  .encryptionMain {
    margin-top: 100px;
    width: 85%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    .encryptionMainItem {
      width: 190px;
      height: 60px;
      border-radius: 6px;
      margin: 0 15px 15px 0;

      p {
        line-height: 50px;
        text-align: center;
        margin-left: 10px;
      }
    }
  }
}</style>